<template>
  <el-dialog title="导出：模块名称" width="600px" @close="closeDialog">
    <!-- 这是导出模块 -->
    <CustomExport :cities="cities" v-model:selectedItems="selectedItems"
      v-on:update:checkedItem="handleCheckedCitiesChange" />

    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirmUpload">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import CustomExport from '@/components/ImportExport/CustomExport.vue';

const props = defineProps<{
  dialogVisible: boolean;
}>();

const emits = defineEmits<{
  (event: 'close'): void;
}>();


const selectedItems = [
  {
    "id": 281,
    "name": "徐之仁测试",
    "loginAccount": "18875071445",
    "mobilePhoneNumber": "18875071445",
    "belongingRole": "1",
    "belongingRoleName": null,
    "mailbox": null,
    "deptId": 1,
    "department": "广千集团",
    "updateBy": "向小蓉",
    "password": "qg123456",
    "sex": 0,
    "personalPhotos": null,
    "status": 0,
    "role": [
      {
        "id": 1,
        "authType": null,
        "delFlag": null,
        "roleName": null,
        "roleKey": null,
        "dataRange": null,
        "roleStatus": null,
        "remark": null,
        "pagingQuery": null,
        "operationRecord": null,
        "menuList": null,
        "dataScope": null,
        "deptId": null,
        "roleUserAssociationsList": null
      }
    ]
  },
  {
    "id": 280,
    "name": "徐之仁测试",
    "loginAccount": "18875071445",
    "mobilePhoneNumber": "18875071445",
    "belongingRole": "1",
    "belongingRoleName": null,
    "mailbox": null,
    "deptId": 1,
    "department": "广千集团",
    "updateBy": "向小蓉",
    "password": "qg123456",
    "sex": 0,
    "personalPhotos": null,
    "status": 0,
    "role": [
      {
        "id": 1,
        "authType": null,
        "delFlag": null,
        "roleName": null,
        "roleKey": null,
        "dataRange": null,
        "roleStatus": null,
        "remark": null,
        "pagingQuery": null,
        "operationRecord": null,
        "menuList": null,
        "dataScope": null,
        "deptId": null,
        "roleUserAssociationsList": null
      }
    ]
  }
]
const cities = ['序号', '姓名', '性别', '年龄', '账号', '密码', '所属部门', '创建时间', '密码', '创建人', '身份证号码'];

const closeDialog = () => {
  emits('close');
};

const handleCheckedCitiesChange = (value) => {
  console.log("选择项:", value);

}

const confirmUpload = () => {
  //el-checkbox拿到选择的数据
  console.log("已选择的项目:");

};

</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: center;
}
</style>
